<template>
  <div class="faq-header" :style="navBarStyle">
    <div class="back-icon" @click="onBack">
      <van-icon name="arrow-left" size="20" color="#fff" />
    </div>
    <div class="header-title">{{ replaceTitle || title }}</div>
    <div class="placeholder-right"></div>
  </div>
  
  <div class="header-placeholder" :style="navBarStyle"></div>
</template>

<script setup lang="ts">
import { computed, onMounted, watch} from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const { t } = useI18n()
let replaceTitle = ref<string>('')
function onBack() {
  if (window.history.state.back)
    history.back()
  else
    router.replace('/')
}

const title = computed(() => {
  if (!route.meta) return ''
  return route.meta.i18n ? t(route.meta.i18n) : (route.meta.title || '')
})

// 计算导航栏样式
const navBarStyle = computed(() => {
  // 只检查元数据中的hideNavBar属性，不再硬编码首页隐藏
  const shouldHide = route.meta?.hideNavBar === true
  return shouldHide ? { display: 'none' } : {}
})

// 添加调试代码
onMounted(() => {
  setTimeout(() => {
    if (route.path == '/gpuinfo') {
      replaceTitle.value = String(route.meta.title ?? '')
    }
  }, 500);

})



</script>

<style scoped>
.faq-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 16px;
  background: #1a0e0e;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  max-width: 700px;
  margin: auto;
}

.header-placeholder {
  height: 54px; /* 与头部高度一致 */
}

.back-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-title {
  /* position: absolute;
  left: 50%;
  transform: translateX(-50%); */
  text-align:center;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
}

.placeholder-right {
  width: 24px;
}
</style>
